<form action="/" method="post" style="display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%" [formGroup]="form" (ngSubmit)="onSubmit(form,$event)">
  <mat-card style="width:300px;height:300px">
    <mat-card-header>
      <mat-card-title>登录:</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <mat-form-field class="full-width">
        <input type="text" matInput name="email" value="" placeholder="您的邮箱" fromControlName="email" />
        <mat-error>{{this.form.getError('required','email')}}</mat-error>
      </mat-form-field>
      <mat-form-field class="full-width">
        <input type="password" matInput name="password" value="" placeholder="您的密码"  formControlName="password"/>
      </mat-form-field>
      <button type="submit" mat-raised-button [disabled]="!this.form.valid">登录</button>
    </mat-card-content>
    <mat-card-actions >
      <p class="text-right">还没有账号 <a href="#">注册</a></p>
      <p class="text-right">忘记密码 <a href="#">找回</a></p>
    </mat-card-actions>
  </mat-card>
  <mat-card style="width:300px;height:300px">
    <mat-card-header>
      <mat-card-title>每日佳句</mat-card-title>
      <mat-card-subtitle>对于错过，别尝试挽留；对于得到，应充满感激；对于失去，谁能保证那本该是属于你的？</mat-card-subtitle>
    </mat-card-header>
    <img src="../../../assets/beautiful.jpg" height="150" class="mat-card-image" alt="Alternate Text" />
    <mat-card-content>
      Don't try to keep what you've missed, be grateful for what you've got, and who can guarantee that it belongs to you?
    </mat-card-content>
  </mat-card>
</form>
